<template>
	<view class="homebox">
		<!-- 		<view class="czname">
			测站信息
		</view> -->
		<!-- 断面列表 -->
		<u-sticky>
			<view class="che_box" hover-class="che_box_av" @click="cheshowFn">
				选择断面参数
			</view>
		</u-sticky>
		<view class="box_lo">
			<view class="czinput">
				<view class="lebox">
					名称：
				</view>
				<view class="leboxinput">
					<view class="">
						<uni-easyinput v-model="cezhanitem.name" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					编码：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.nub" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="hetop">
				<view class="titleclass">
					定位点
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					经度：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.lot" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					纬度：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.lat" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="button">
				<u-button type="success" shape="circle" text="点击获取经纬度" @click="loalonFn"></u-button>
			</view>
			<view class="hetop">
				<view class="titleclass">
					测段参数
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					断面形状：
				</view>
				<view class="">
					<uni-data-checkbox v-model="cezhanitem.xingzhuang" :localdata="range"></uni-data-checkbox>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					渠底宽度：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.qudikuandu" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<!-- 			<view class="czinput">
				<view class="lebox">
					设计水深：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.shejishuishen" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					设计流量：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.shejiliuliang" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<!-- 			<view class="czinput">
				<view class="lebox">
					上限水深：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.shangxianshuishen" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<!-- 			<view class="czinput">
				<view class="lebox">
					下限水深：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.xiaxianshuishen" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<!-- 			<view class="czinput">
				<view class="lebox">
					渠底纵坡：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.qudizongpo" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<!-- 			<view class="czinput">
				<view class="lebox">
					渠坡糙率：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.qupocaolv" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<view class="hetop">
				<view class="titleclass">
					边坡角度
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					左坡角：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.lSA" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					右坡角：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.rSA" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="hetop">
				<view class="titleclass">
					标准测法
				</view>
			</view>

			<!-- 			<view class="czinput">
				<view class="lebox">
					测线布置：
				</view>
				<view class="">
					<uni-data-checkbox v-model="cezhanitem.cexianbuzhi" :localdata="range2"></uni-data-checkbox>
				</view>
			</view> -->
			<view class="czinput">
				<view class="lebox">
					默认测法：
				</view>
				<view class="">
					<uni-data-checkbox v-model="cezhanitem.morencefa" :localdata="range3"></uni-data-checkbox>
				</view>
			</view>
			<view class="hetop">
				<view class="titleclass">
					边坡系数
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					左岸系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.kL" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					右岸系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.kR" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<!-- 			<view class="czinput">
				<view class="lebox" style="width: 260rpx">
					水位修正：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.zijishuishenxiuzheng" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<view class="hetop">
				<view class="titleclass">
					单条测线
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					测线条数：
				</view>
				<view class="">
					<view class="" style="width: 300rpx;">
						<uni-data-select :clear="false" v-model="cezhanitem.measurementModeList[1].value.length"
							:localdata="range1" placeholder="请选择测线条数" @change="change1"></uni-data-select>
					</view>
				</view>
			</view>
			<view class="" style="height: 30rpx;">

			</view>
			<view class="qicebox">
				<view class="qicedian">
					测线编号
				</view>
				<view class="qicedian">
					水平坐标
				</view>
				<view class="qicedian">
					行走距离
				</view>
				<view class="qicedian">
					架空高度
				</view>
				<view class="qicedian">
					流速系数
				</view>
			</view>
			<view class="qicebox" v-for="(item,index) in cezhanitem.measurementModeList[1].value" :key="index">
				<view class="qicinput">
					{{item.id}}
				</view>
				<view class="qicinput">
					<!-- {{item.zuobiao}} -->
					<u--input v-model="item.cR" placeholder="输入内容" border="none" type="digit"></u--input>
				</view>
				<view class="qicinput">
					<!-- {{item.xishu}} -->
					<u--input v-model="item.zJ" placeholder="输入内容" border="none" type="digit"></u--input>
				</view>
				<view class="qicinput">
					<!-- {{item.xishu}} -->
					<u--input v-model="item.bC" placeholder="输入内容" border="none" type="digit"></u--input>
				</view>
				<view class="qicinput">
					<!-- {{item.xishu}} -->
					<u--input v-model="item.xishu" placeholder="输入内容" border="none" type="digit"></u--input>
				</view>
			</view>
			<view class="" style="color: #144892;">
				架空高度为上止点时铅鱼底部到渠底的高度
			</view>
			<view class="czinput">
				<view class="" style="width: 350rpx;">
					流速仪距铅鱼底：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.measurementModeList[0].value" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<!-- 			<view class="czinput">
				<view class="lebox">
					水量系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.shuiliangxishu" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<!-- 			<view class="hetop">
				<view class="titleclass">
					边坡测线流速系数
				</view>
			</view> -->
			<!-- 			<view class="czinput">
				<view class="lebox">
					右坡测线系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.vmL" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<!-- 			<view class="czinput">
				<view class="lebox">
					左坡测线系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.vmR" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<view class="" style="height: 100rpx;">
				<u-button @click="saveCezhan" type="primary" shape="circle" text="保存到本地"></u-button>
			</view>
			<view class="" style="height: 100rpx;">

			</view>
		</view>
		<!-- 断面参数列表 -->
		<u-picker :show="cheshow" :defaultIndex="[0,0]" :columns="columns" keyName="label" @confirm="confirmuploadFn"
			@cancel="canceluploadFn" itemHeight="50"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cheshow: false,
				columns: [],
				buttext: '选择测流车',
				cezhanitem: {
					measurementModeList: [{
						value: '0'
					}, {
						value: []
					}, {
						value: []
					}]
				},
				range: [{
					text: '梯形',
					value: 0
				}, {
					text: '矩形',
					value: 1
				}, ],
				range1: [{
						text: '1条测线',
						value: 1
					},
					{
						text: '2条测线',
						value: 2
					},
					{
						text: '3条测线',
						value: 3
					},
					{
						text: '4条测线',
						value: 4
					},
					{
						text: '5条测线',
						value: 5
					},
					{
						text: '6条测线',
						value: 6
					},
					{
						text: '7条测线',
						value: 7
					},
					{
						text: '8条测线',
						value: 8
					},
					{
						text: '9条测线',
						value: 9
					},
				],
				range2: [{
						text: '均匀',
						value: 1
					},
					{
						text: '不均匀',
						value: 2
					}
				],
				range3: [{
						text: '一点法',
						value: 1
					},
					{
						text: '三点法',
						value: 3
					}
				],
				stationList: [],
				InterfaceData: [],
				devId: '',
				measurementModeList: []
			}
		},
		onLoad(option) {
			this.stationProFn()
		},
		onShow() {

		},
		methods: {
			// 选择断面
			cheshowFn() {
				this.cheshow = true
			},
			// 选择断面确认
			confirmuploadFn(e) {
				this.devId = e.value[0].id
				console.log('确认', e);
				this.getInfoFn(e.value[0].id, e.value[1].id, )
				this.cheshow = false
				setTimeout(() => {
					this.loalonFn()
				}, 300)
			},
			// 选择断面取消
			canceluploadFn() {
				this.cheshow = false
				console.log('取消');
			},
			loalonFn() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.cezhanitem.lot = res.longitude
						this.cezhanitem.lat = res.latitude
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});

			},
			// 选择测线
			change1(e) {
				console.log('eee', e);
				this.cezhanitem.cexiantiaoshu = e
				this.cezhanitem.measurementModeList[1].value.length = 0
				for (var i = 0; i < e; i++) {
					this.cezhanitem.measurementModeList[1].value.push({
						id: 1 + i,
						cR: '',
						zJ: '',
						bC: ''
					})
				}
			},
			// 断面信息列表
			stationProFn() {
				uni.$u.http.get('/device/stationProfile/list').then(res => {
					if (res.code == 200) {
						let arrlist = []
						let arrflow = res.rows.map((i) => {
							return {
								label: i.name,
								id: i.id,
							}
						})
						let arrtype = [{
							label: '索道式测流',
							id: 1,
						}, {
							label: '轨道式测流',
							id: 2,
						}, {
							label: '手持杆测流',
							id: 3,
						}, {
							label: '多普勒测流船',
							id: 4,
						}, {
							label: '时差法流量计',
							id: 5,
						}]
						arrlist[0] = arrflow
						arrlist[1] = arrtype
						this.columns = arrlist
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			//断面信息详情
			getInfoFn(id, spaType) {
				uni.$u.http.get('/device/stationProfile/getInfoPhone', {
					params: {
						"id": id,
						"spaType": spaType
					}
				}).then(res => {
					if (res.code == 200) {
						console.log('断面详情', res);
						let str = res.data.measurementModeList[0].configData
						let arrStr = JSON.parse(str)
						let typeArr = []
						console.log('断面详情编译', arrStr);
						this.cezhanitem = res.data

						for (let i = 0; i < arrStr.length; i++) {
							console.log('i', i);
							if (arrStr[i].fieldsCode == 'qk') {
								typeArr[0] = arrStr[i]
							} else if (arrStr[i].fieldsCode == 'cexianlist') {
								typeArr[1] = arrStr[i]
							} else if (arrStr[i].fieldsCode == 'signalLimit') {
								typeArr[2] = arrStr[i]
							}
						}
						this.cezhanitem.measurementModeList = typeArr
						this.cezhanitem.cexiantiaoshu = this.cezhanitem.measurementModeList[1].value.length
						console.log('转换字符串', this.cezhanitem);
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// getInfoFn(id) {
			// 	uni.$u.http.get('/device/stationProfile/getInfo/' + id).then(res => {
			// 		if (res.code == 200) {
			// 		}
			// 	}).catch(err => {
			// 	})
			// },
			// 保存测站信息
			saveCezhan() {
				if (this.cezhanitem.cexiantiaoshu == 0) {
					uni.showToast({
						title: '未选择测线',
						duration: 1500
					});
					return
				}
				let date = Date.parse(new Date())
				this.cezhanitem.id = date
				let datalist = []
				datalist = this.vuex_saveCezhandata
				datalist.unshift(this.cezhanitem)
				uni.$u.vuex('vuex_saveCezhandata', datalist)
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	//选择断面列表
	.che_box {
		margin: 0rpx 0rpx 20rpx 0;
		padding: 20rpx;
		text-align: center;
		background-color: #144892;
		color: #fff;
		border-radius: 10rpx;
		font-size: 40rpx;
	}

	.che_box_av {
		background-color: #31475e;
	}

	// 网络列表
	.box_net {
		margin-top: 30rpx;

		.box_t {
			margin-bottom: 20rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #f5f7f9;
			border: 5rpx solid #fff;
			box-shadow: 0 0 10rpx 5rpx rgba(183, 198, 221, 0.9);

			.ti {
				text-align: center;
				font-size: 45rpx;
				color: #000000;
			}

			.flx {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 60rpx;

				.ie {
					color: #444444;
					width: 320rpx;

					.text {
						font-size: 40rpx;
						color: #5b4c95;
						font-weight: bold;
					}

				}
			}
		}
	}

	.titleclass {
		color: #144892;
	}

	.hetop {
		text-align: center;
		line-height: 60rpx;
		background-color: #e8eaec;
		border-radius: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.homebox {
		width: 690rpx;
		padding: 0 30rpx;

		.czname {
			display: flex;
			justify-content: center;
			line-height: 100rpx;
			font-size: 40rpx;
			color: #144892;
		}

		.box_lo {
			.czinput {
				font-size: 35rpx;
				padding: 20rpx 20rpx;
				display: flex;
				align-items: center;
				border-radius: 0rpx;
				margin-bottom: 20rpx;

				.lebox {
					width: 250rpx;
				}
			}
		}

		.button {
			padding: 0 30rpx 30rpx 30rpx;
		}

		.qicebox {
			display: flex;
			justify-content: center;
			align-items: center;

			.qicedian {
				width: 200rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				color: #fffcf8;
				// border: #dddcda solid 1rpx;
				background-color: #144892;
				border-radius: 20rpx 20rpx 0 0;
			}

			.qicinput {
				width: 160rpx;
				height: 100rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 100rpx;
				color: #7e7d7a;
				border: #dddcda solid 1rpx;
				background-color: #ffffff;
			}
		}
	}
</style>
<style>
	.u-line-1 span {
		color: #000000;
		/* font-size: 35rpx; */
	}

	.u-picker__view__column__item {
		background-color: #e5e5da !important;
	}

	page {
		background-color: #f5f7f9;
	}
</style>